<!DOCTYPE html>
<html>
<head>
<title>Checkout</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- start menu -->
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script><!--
<script>$(document).ready(function(){$(".memenu").memenu();});</script>-->
<script src="js/simpleCart.min.js"> </script>
<script src="js/jquery-3.3.1.js"></script>
<script src="layer/layer.js"></script>
<!-- slide -->
</head>
<body>
<!--header-->
<div class="header">
	<div class="header-top">
		<div class="container">
			<div class="col-sm-4 logo">
				<a href="index.html"><img src="images/logo.png" alt=""></a>
			</div>
			<div class="col-sm-4 header-left" style="width: 400px">
				<div id="userInfo">
				</div>
				<div class="cart box_1">
					<a href="checkout.html">
						<h3>
							<div class="total">
								<img src="images/cart.png" alt=""/>
							</div>
						</h3>
					</a>
					<p><a href="javascript:;" class="simpleCart_empty">购物车</a></p>

				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="container">
		<div class="head-top">
			<div class="col-sm-2 number">
				<span><i class="glyphicon glyphicon-phone"></i>085 596 234</span>
			</div>
			<div class="col-sm-8 h_menu4">
				<ul class="memenu skyblue">
					<li class=" grid"><a  href="index.html">主页</a></li>
					<li><a  href="products.html">男子</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有服饰</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">上衣</a></li>
											<li><a style="color: black" href="products.html">短袖体恤</a></li>
											<li><a style="color: black" href="products.html">运动卫衣</a></li>
											<li><a style="color: black" href="products.html">夹克/外套</a></li>
											<li><a style="color: black" href="products.html">棉服/羽绒服</a></li>
											<li><a style="color: black" href="products.html">运动下装</a></li>
											<li><a style="color: black" href="products.html">泳裤</a></li>
											<li><a style="color: black" href="products.html">比赛服 & Chinos</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有鞋类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">跑步</a></li>
											<li><a style="color: black" href="products.html">篮球</a></li>
											<li><a style="color: black" href="products.html">户外</a></li>
											<li><a style="color: black" href="products.html">足球</a></li>
											<li><a style="color: black" href="products.html">网球</a></li>
											<li><a style="color: black" href="products.html">拖鞋</a></li>
											<li><a style="color: black" href="products.html">休闲</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">配附件类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">包</a></li>
											<li><a style="color: black" href="products.html">袜子</a></li>
											<li><a style="color: black" href="products.html">帽子/手套/围巾</a></li>
											<li><a style="color: black" href="products.html">足球/篮球</a></li>
											<li><a style="color: black" href="products.html">运动装备</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li><a  href="products.html">女子</a>
						<div class="mepanel">
							<div class="row">
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有服饰</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">上衣</a></li>
											<li><a style="color: black" href="products.html">短袖体恤</a></li>
											<li><a style="color: black" href="products.html">运动卫衣</a></li>
											<li><a style="color: black" href="products.html">夹克/外套</a></li>
											<li><a style="color: black" href="products.html">短裙/连衣裙</a></li>
											<li><a style="color: black" href="products.html">运动下装</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">所有鞋类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">跑步</a></li>
											<li><a style="color: black" href="products.html">户外</a></li>
											<li><a style="color: black" href="products.html">足球</a></li>
											<li><a style="color: black" href="products.html">网球</a></li>
											<li><a style="color: black" href="products.html">拖鞋</a></li>
											<li><a style="color: black" href="products.html">休闲</a></li>
										</ul>
									</div>
								</div>
								<div class="col1">
									<div class="h_nav">
										<h4><a style="color: black" href="products.html">配附件类</a></h4>
										<ul>
											<li><a style="color: black" href="products.html">包</a></li>
											<li><a style="color: black" href="products.html">袜子</a></li>
											<li><a style="color: black" href="products.html">帽子/手套/围巾</a></li>
											<li><a style="color: black" href="products.html">球类</a></li>
											<li><a style="color: black" href="products.html">运动装备</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li><a  href="typo.html">品牌</a></li>
					<li><a class="color6" href="">联系我们</a></li>
				</ul>
			</div>
			<div class="col-sm-2 search">
				<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i> </a>
			</div>
			<div class="clearfix"> </div>
			<!---pop-up-box---->
			<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
			<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!---//pop-up-box---->
			<div id="small-dialog" class="mfp-hide">
				<div class="search-top">
					<div class="login">
						<input type="submit" value="">
						<input type="text" value="Type something..." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '';}">
					</div>
					<p>	Shopping</p>
				</div>
			</div>
			<script>
                $(document).ready(function() {
                    $('.popup-with-zoom-anim').magnificPopup({
                        type: 'inline',
                        fixedContentPos: false,
                        fixedBgPos: true,
                        overflowY: 'auto',
                        closeBtnInside: true,
                        preloader: false,
                        midClick: true,
                        removalDelay: 300,
                        mainClass: 'my-mfp-zoom-in'
                    });

                });
			</script>
			<!---->
		</div>
	</div>
</div>
<!--//header-->
<!---->
<div class="container">
	<div class="check-out">
		<h1>购物车</h1>
			<table id="cart">

			</table>
	<div class="clearfix"> </div>
    </div>
</div>
<!--footer-->
<div class="footer">
	<div class="container">
		<div class="footer-top">
			<div class="col-md-4 top-footer1">
				<h2>Newsletter</h2>
					<form>
						<input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
						<input type="submit" value="SUBSCRIBE">
					</form>
			</div>
			<div class="clearfix"> </div>	
		</div>	
	</div>
	<div class="footer-bottom">
		<div class="container">
				<div class="col-md-3 footer-bottom-cate">
					<h6>Categories</h6>
					<ul>
						<li><a href="#">Curabitur sapien</a></li>
						<li><a href="#">Dignissim purus</a></li>
						<li><a href="#">Tempus pretium</a></li>
						<li><a href="#">Dignissim neque</a></li>
						<li><a href="#">Ornared id aliquet</a></li>
						
					</ul>
				</div>
				<div class="col-md-3 footer-bottom-cate">
					<h6>Feature Projects</h6>
					<ul>
						<li><a href="#">Curabitur sapien</a></li>
						<li><a href="#">Dignissim purus</a></li>
						<li><a href="#">Tempus pretium</a></li>
						<li><a href="#">Dignissim neque</a></li>
						<li><a href="#">Ornared id aliquet</a></li>
						
					</ul>
				</div>
				<div class="col-md-3 footer-bottom-cate">
					<h6>Top Brands</h6>
					<ul>
						<li><a href="#">Curabitur sapien</a></li>
						<li><a href="#">Dignissim purus</a></li>
						<li><a href="#">Tempus pretium</a></li>
						<li><a href="#">Dignissim neque</a></li>
						<li><a href="#">Ornared id aliquet</a></li>
						<li><a href="#">Ultrices id du</a></li>
						<li><a href="#">Commodo sit</a></li>
						
					</ul>
				</div>
				<div class="col-md-3 footer-bottom-cate cate-bottom">
					<h6>Our Address</h6>
					<ul>
						<li>Aliquam metus  dui. </li>
						<li>orci, ornareidquet</li>
						<li> ut,DUI.</li>
						<li>nisi, dignissim</li>
						<li>gravida at.</li>
						<li class="phone">PH : 6985792466</li>
					</ul>
				</div>
				<div class="clearfix"> </div>
				<p class="footer-class">Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
	</div>
</div>

<!--//footer-->
</body>
</html>
<script>
	var pageNum;
    //调用检测自己的登录状态
    proveMe();

    //检测自己的登录状态
    function proveMe() {
        $.ajax({
            type:'post',
            url:'/user/proveMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                //登陆成功，则...
                if(data.code==200){
                    var user = data.data.user;
                    userid = user.userid;
                    var account = user.account;
                    var username = user.username;
                    var email = user.email;

                    //调用显示用户在线信息函数
                    showUser(username);

                    //获得一页购物车的数据
                    getCartOrders('');
                }else{
                    window.location.href="index.html";
                }
            }
        });
    }

    //获取一页购物车信息的数据
    function getCartOrders(pn) {

        var value = "userid="+userid+"&pageNum="+pn;
        $.ajax({
            type:'get',
            url:'/orders/selectCartByPage',
            data:value,
            cache:false,
            dataType:'json',
            success:function(data){
                var total = data.total;	//总数据数
                var list = data.list; //数据列表
                pageNum = data.pageNum; //页码
                pages = data.pages;  //总页码
                var prePage = data.prePage;  //上一页
                var nextPage = data.nextPage;  //下一页
                var isFirstPage = data.isFirstPage;  //是否为第一页
                var isLastPage = data.isLastPage;	//是否为最后一页

                if(list!=null){
                    $("#cart").empty();
                    $("#cart").append("<div style='background: none;padding: 0px 0px 0px 7px;margin: 1px 4px 0px 0px; float:left;width:34px;height:42px;font-size:20px;border:1px solid #c0c0c0;'>" +
                        "            <a id='Ahref1' onclick='previousPage("+ pageNum +")' href='#' style='color:#8D8D8D;font-size:30px; background: none;font-weight: 800'><</a>" +
                        "            </div>" +
                        "            <div style='background: none;padding: 0px 0px 0px 9px;margin: 1px 20px 0px 0px; float:left;width:34px;height:42px;font-size:20px;border:1px solid #c0c0c0;'>" +
                        "            <a id='Ahref2' onclick='nextPage("+ pageNum +")' href='#' style='color:#8D8D8D;font-size:30px; background: none;font-weight: 800'>></a>" +
                        "            </div><div style='margin-top:10px; font-size: 17px'>购物车可容纳20件商品，当前已拥有"+ total +"件。当前第"+ pageNum +"页</div>");
                    $("#cart").append("<tr>"+
                    "<th>商品</th>"+
                    "<th>数量</th>"+
                    "<th>单价</th>"+
                    "<th>金额</th>"+
                    "<th>操作</th>"+
                        "</tr>");
                    for(var i=0; i<list.length; i++) {
                        var orderid = list[i].orderid;
                        var productid = list[i].productid;
                        var productnum = list[i].productnum;
                        var productsize = list[i].productsize;
                        var orderdate = list[i].orderdate;
                        var orderstatus = list[i].orderstatus;
                        //拿到产品id对应的产品参数
                        getProductById(orderid, productid, productnum, orderdate, orderstatus, productsize);
                    }
                }else {
                    showDefaultOrders();
                }

            }
        });
    }

    //拿到id对应产品
    function getProductById(orderid,productid, productnum, orderdate, orderstatus, productsize) {
        $.ajax({
            type:'post',
            url:'/product/selectById',
            data:'productId='+productid,
            cache:false,
            dataType:'json',
            success:function(data){
                if(data!=null){
                    var productname = data.productname;
                    var productprice = data.productprice;
                    var imageurl = data.imageurl;
                    //显示订单信息
                    showOrders(productid, orderid,imageurl, productname, productprice, productnum, productsize);
                }
            }
        });
    }

    //创建订单
    function placeOrder(orderid, productid, productnum, productsize) {

        //弹窗
        layer.open({
            type: 2,
            area: ['600px', '520px'],
            skin: 'layui-layer-rim', //加上边框
            content: ['placeOrder.html?orderId='+orderid+'&productId='+productid+'&productNum='+productnum+'&productSize='+productsize, 'no']
        });
    }

    //删除订单
    function deleteOrderById(orderid) {
        layer.confirm('您确定要删除吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            $.ajax({
                type:'post',
                url:'/orders/deleteOrderById',
                data:'orderid='+orderid,
                cache:false,
                dataType:'json',
                success:function(data){
                    layer.msg(data.data);
                    getCartOrders('');
                }
            });
        }, function(){
        });

    }

    //显示订单信息
    function showOrders(productid, orderid, imageurl, productName, productprice, productnum, productsize) {
        var totalPrice = productnum * productprice;
        $("#cart").append("<tr>"+
            "<td class='ring-in'><a href='single.html' class='at-in'>"+
            "<img src='../"+imageurl+"' class='img-responsive' alt=''></a>"+
            "<div class='sed'>"+
            "<h5>"+productName+"</h5>"+
            "<p>商品信息：尺码："+productsize+"</p>"+
            "</div>"+
            "<div class='clearfix'></div>"+
            "</td>"+
            "<td class='check'><input type='text' onchange='changeNum(this,"+orderid+")' value='"+productnum+"'></td>"+
            "<td>￥"+productprice+"</td>"+
            "<td id='total"+orderid+"'>￥"+totalPrice	+"</td>"+
            "<td><a onclick='deleteOrderById("+orderid+")' href='#'>删除</a>l<a href='#' onclick='placeOrder("+orderid+", "+productid+", "+productnum+", "+productsize+")'>购买</a></td>"+
            "</tr>");
    }

    //显示订单信息的缺省值
    function showDefaultOrders() {
        $("#orderList").append("<li style=' font-size: 20px;' >无订单记录</li>");
    }

    //修改货物数量
    function changeNum(input,orderid) {
        var productnum = input.value;
        $.ajax({
            type:'get',
            url:'/orders/updateOrder',
            data:'productnum='+productnum+'&orderid='+orderid,
            cache:false,
            dataType:'json',
            success:function(data){
				layer.msg(data.data);
                getCartOrders(pageNum);
            }
        });
    }

    //注销
    function removeMe() {
        $.ajax({
            type:'post',
            url:'/user/removeMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                if(data.status==200){
                    proveMe();
                }
            }
        });
    }

    //显示用户在线信息函数
    function showUser(username) {
        $("#userInfo").empty();
        $("#userInfo").append("<p class='log' style='width:250px;font-weight:400;font-size:20px;float: left;margin-top: 14px'>欢迎您，<a href='userInfo.html' style='color:black;display: inline;margin: 0;'>"+ username +"</a><a style='display: inline;color: #B2B2B2' onclick='removeMe()' href='#'>注销</a></p>");
    }

    //上一页
    function previousPage(pageNum) {
        var pn = pageNum - 1;
        if(pn>=1){
            getCartOrders(pn)
        }else {
            layer.msg("当前已在第一页！！");
        }
    }

    //下一页
    function nextPage(pageNum) {
        var pn = pageNum + 1;
        if(pn<=pages){
            getCartOrders(pn);
        }else {
            layer.msg("已经到最后了！！");
        }
    }


</script>